<template>
  <div id="detailShow">
    <div class="form-box">
      <h3 class="title">
        活动列表页
      </h3>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-form-item label="展示名称">
          {{ ruleForm.name }}
        </el-form-item>
        <el-form-item label="活动封面">
          <div class="img-box">
            <el-image fit="contain" :src="ruleForm.imgUrl"></el-image>
          </div>
        </el-form-item>
      </el-form>
      <h3 class="title">
        活动详情页
      </h3>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动H5页面">
          {{ ruleForm.url }}
        </el-form-item>
      </el-form>
      <h3 class="title">
        作品展示页
      </h3>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动说明背景图">
          <div class="img-box">
            <el-image fit="contain" :src="ruleForm.imgBackUrl"></el-image>
          </div>
        </el-form-item>
        <el-form-item label="活动说明">
          {{ ruleForm.remark }}
        </el-form-item>
      </el-form>
      <h3 class="title">
        活动结束详情页
      </h3>
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        label-width="130px"
        class="demo-ruleForm"
      >
        <el-form-item label="活动结束H5页面">
          {{ ruleForm.endUrl }}
        </el-form-item>
      </el-form>
    </div>
    <div class="show-right">
      <img src="/static/img/tel.jpg" alt="" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'DetailShow',
  msg: '官方征集自评活动/查看详情/活动展示',
  data() {
    return {
      ruleForm: {
        name: '晒出你的花征集大赛', // 展示名称
        imgUrl:
          'https://dapeng-test-image.oss-cn-beijing.aliyuncs.com/2019-09-05/juz6hpazht/juz6hpazht/1567662327188.jpg', // 活动封面
        url: 'https://www.baidu.com', // 活动H5页面
        imgBackUrl:
          'http://lxz-test.oss-cn-beijing.aliyuncs.com/2019-06-18/6.jpg', // 活动说明背景图
        remark:
          '这个效果的字体，改了很多次，最终受到老板肯定才是最重要的！谢谢大鹏教育！这个效果的字体，改了很多次，最终受到老板肯定才是最重要的！谢谢大鹏教育！这个效果的字体，改了很多次，最终受到老板肯定才是最重要的！谢谢大鹏教育！这个效果的字体，改了很多次，最终受到老板肯定才是最重要的！谢谢大鹏教育！', // 活动说明
        endUrl: 'https://www.baidu.com' // 活动结束H5页面
      }
    }
  },
  mounted() {},
  methods: {
    /* 显示选择部门弹窗 */
    showSelectDep() {
      /* this.$refs.selectDep.showModel(); */
    },
    /* 保存 */
    submenu() {
      console.log(this.ruleForm)
    },
    /* 取消 */
    cancel() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less">
#detailShow {
  padding: 7px 30px;
  overflow: hidden;

  .form-box {
    float: left;
    width: 580px;

    .img-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 260px;
      height: 130px;
      border: 1px solid #eee;
      background: #eee;

      .el-image {
        width: 100%;
        height: 100%;
      }
    }

    form.el-form.demo-ruleForm {
      margin-bottom: 20px;
      padding-bottom: 15px;
      border-bottom: 1px solid #f3f4f7;

      &:last-child {
        border: none;
      }
    }

    .el-form-item__label {
      color: #8b91a1;
      padding-right: 23px;
    }

    .el-form-item__content,
    .el-form-item__label {
      line-height: 28px;
    }
  }

  .show-right {
    float: left;
    margin: 30px 0 0 50px;

    img {
      width: 210px;
    }
  }
}
</style>
